<template>
<l-layout >
    <l-panel style="padding:0;" >
        <template #toolLeft >
            <div class="l-panel--item" >
                <el-input :placeholder="$t('请输入名称/编号')"  @keyup.enter.native="hanleSearch" v-model="searchWord" size="mini" >
                    <el-button @click="hanleSearch" slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </div>
        </template>
        <template #toolRight >
            <el-button-group>
                <el-button size="mini" icon="el-icon-refresh-left" @click="handleRefresh"></el-button>
            </el-button-group>
            <el-button-group v-if="lr_hasPageAuth('classifysAdd','buttons')" >
                <el-button type="primary" size="mini" icon="el-icon-plus"
                    @click="handleAdd()"
                >{{$t('新增')}}</el-button>
            </el-button-group>
        </template>
        <l-table 
            ref="table"
            :loading="tableLoading"
            :columns="columns" 
            :dataSource="tableShowData" 
            row-key="f_ItemId"
            :isTree="true"
            pid-key="f_ParentId"
            >
            <template v-slot:f_IsTree="scope" >
                <el-switch
                    :active-value="1"
                    :inactive-value="0"
                    v-model="scope.row.f_IsTree"
                    @change="handleEnableChange(scope.row)"
                    >
                </el-switch>
            </template>
            <template v-slot:f_EnabledMark="scope" >
                <el-switch
                    :active-value="1"
                    :inactive-value="0"
                    v-model="scope.row.f_EnabledMark"
                    @change="handleEnableChange(scope.row)"
                    >
                </el-switch>
            </template>
            <l-table-btns :btns="tableBtns" @click="lr_handleTableBtnClick" ></l-table-btns>
        </l-table>
    </l-panel>

    <l-dialog
        :title="formTitle"
        :visible.sync="formVisible"
        :height="440"

        @close="handleCloseForm"
        @opened="handleOpenedForm"
        @ok="handleSave"
        >
        <div class="l-from-body" > 
            <el-form :model="formData" size="mini" :rules="rules"  ref="form" label-width="80px"  >
               <el-form-item :label="$t('上级')" prop="f_ParentId">
                    <l-tree-select
                        v-model="formData.f_ParentId"
                        :options="dataItemClassifysTree"
                        >
                    </l-tree-select>
                </el-form-item>
                <el-form-item :label="$t('名称')" prop="f_ItemName">
                    <el-input v-model="formData.f_ItemName"></el-input>
                </el-form-item>
                <el-form-item :label="$t('编码')" prop="f_ItemCode">
                    <el-input v-model="formData.f_ItemCode"></el-input>
                </el-form-item>
                <el-form-item :label="$t('排序')" prop="f_SortCode">
                    <el-input-number v-model="formData.f_SortCode"  controls-position="right" :min="1" ></el-input-number>
                </el-form-item>
                <el-form-item :label="$t('树型')" prop="f_IsTree">
                    <el-switch
                        :active-value="1"
                        :inactive-value="0"
                        v-model="formData.f_IsTree"
                        >
                    </el-switch>
                </el-form-item>
                <el-form-item :label="$t('有效')" prop="f_EnabledMark">
                    <el-switch
                        :active-value="1"
                        :inactive-value="0"
                        v-model="formData.f_EnabledMark"
                        >
                    </el-switch>
                </el-form-item>
                <el-form-item :label="$t('描述')" prop="f_Description">
                    <el-input type="textarea" v-model="formData.f_Description"></el-input>
                </el-form-item>
            </el-form>
        </div>
    </l-dialog>

</l-layout>
</template>

<script>

export default {
    data () {
        return {
            searchWord:'',
            columns: [
                {label:'名称',prop:'f_ItemName',minWidth:'100'},
                {label:'编码',prop:'f_ItemCode',minWidth:'100'},
                {label:'排序',prop:'f_SortCode',width:'64',align:'center'},
                {label:'树型',prop:'f_IsTree',width:'64',align:'center'},
                {label:'有效',prop:'f_EnabledMark',width:'64',align:'center'}
            ],
            tableBtns:[
                {prop:'ClassifysEdit',  label:'编辑'},
                {prop:'ClassifysDelete',label:'删除'}
            ],
            tableLoading:false,
            tableData: [],

            formTitle:'',
            formVisible:false,
            formEdit:false,
            formRow:null,

            formData:{
                f_ParentId: '',
                f_ItemName: '',
                f_ItemCode: '',
                f_SortCode: '',
                f_IsTree: 0,
                f_EnabledMark:1,
                f_Description: ''
            },
            rules: {
                f_ItemCode: [
                    { required: true, message: '请输入编号' },
                    { validator: this.lr_existDbFiled,keyValue:() => { return this.formData.f_ItemId },tableName:'lr_base_dataitem',keyName:'f_ItemId',trigger: 'null'}
                ],
                f_ItemName: [
                    { required: true, message: '请输入名称' }
                ]
            },
            myId:''
        }
    },
    created () {
    },
    mounted () {
        this.handleRefresh()
    },
    computed:{
        tableShowData(){
            return this.$toTree(this.tableData,"f_ItemId","f_ParentId","f_ItemId","f_ItemName")
        },
        dataItemClassifysTree(){
            return this.$toTree(this.dataItemClassifys.filter(item=>item.f_Type!=1),"f_ItemId","f_ParentId","f_ItemId","f_ItemName",[this.myId])
        },
        dataItemClassifys(){
            return this.$store.state.data.dataItem.classifys
        }
    },
    methods:{
        async handleRefresh(){
            this.tableLoading = true
            await this.lr_loadDataItemClassifys(false)
            this.init()
            this.tableLoading = false
        },
        init(){
            this.tableData = this.$deepClone(this.dataItemClassifys.filter(item=>item.f_Type!=1))
        },
        hanleSearch(){
            if(this.searchWord){
                this.tableData = this.dataItemClassifys.filter(item =>item.f_Type!=1 && item.f_ItemName.indexOf(this.searchWord) >-1 || item.f_ItemCode.indexOf(this.searchWord)>-1)
            }
            else{
                this.init()
            }
        },

        handleAdd(){
            this.formEdit = false
            this.myId = ''
            this.showForm('新增分类')
        },
        handleClassifysEdit($index,row){  
            this.formEdit = true
            this.formRow = row
            this.myId = row.f_ItemId
            this.showForm('编辑分类')
        },
        handleEnableChange(row){
            this.$store.dispatch("data/dataItem/updateClassify",this.$deepClone(row)).then(()=> {
                this.$message({
                    type: 'success',
                    message: this.$t('更新成功!')
                })
            })
        },
        handleClassifysDelete($index,row){
            this.$confirm(
                this.$t('此操作将永久删除该数据, 是否继续?'), 
                this.$t('提示'), {
                confirmButtonText: this.$t('确定'),
                cancelButtonText: this.$t('取消'),
                type: 'warning'
            }).then(() => {
                this.$store.dispatch("data/dataItem/removeClassify",row.f_ItemId).then(()=> {
                    this.$message({
                        type: 'success',
                        message: this.$t('删除成功!')
                    })
                    this.init()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: this.$t('已取消删除')
                })       
            })
        },
        handleSave(showLoading,hideLoading){
            this.$refs.form.validate((valid)=>{
                if(valid){
                    showLoading();
                    const formData = this.$deepClone(this.formData)
                    if(this.formEdit){// 修改数据
                        this.$store.dispatch("data/dataItem/updateClassify",formData).then(()=> {
                            hideLoading();
                            this.formVisible = false
                            this.init()
                            this.$message({
                                type: 'success',
                                message: this.$t('更新成功!')
                            })
                        }).catch(() => {
                            hideLoading()
                        })
                    }
                    else{// 新增数据
                        this.$store.dispatch("data/dataItem/addClassify",formData).then(()=> {
                            hideLoading();
                            this.formVisible = false
                            this.init()
                            this.$message({
                                type: 'success',
                                message: this.$t('新增成功!')
                            })

                        }).catch(() => {
                            hideLoading();
                        })
                    }
                }
            });
        },
        handleOpenedForm(){
            if(this.formEdit){
                this.formData = this.$deepClone(this.formRow)
            }
        },
        handleCloseForm(){
            this.formData.f_ItemId = ''
            this.$refs.form && this.$refs.form.resetFields()
        },
        showForm(text){
            this.formTitle = text
            this.formVisible = true
        }
    }
}
</script>